<template>
  <view class="alarmConfirmDetail content-wrap">
    <u-navbar :is-back="true" title="预警详情" :title-bold="true" title-color="#000"></u-navbar>
    <view class="alarmConfirmDetail-content">
      <!-- 预警信息 -->
      <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 0' }">
        <view slot="head">
          <view class="card-row u-flex-col">
            <view class="u-flex">
              <u-line
                color="#014833"
                direction="col"
                :hair-line="false"
                margin="0 20rpx 0 0"
                length="40rpx"
              ></u-line>
              <view class="card-row-title t-green f-bold">预警信息</view>
            </view>
          </view>
        </view>
        <view slot="body">
          <view class="card-row u-flex-col u-p-t-20 u-p-b-30">
            <u-cell-group :border="false">
              <template v-for="(item, index) in baseInfo">
                <u-cell-item
                  :key="index"
                  title-width="150"
                  v-if="index !='2' "
                  :title="item.name"
                  :border-bottom="false"
                  :title-style="{ color: '#333333' }"
                  :value-style="{
                    display: 'flex',
                    paddingLeft: '20rpx',
                    textAlign: 'left',
                    color: '#666666',
                  }"
                  :arrow="false"
                  :value="getBasicInfo(item)"
                ></u-cell-item>
                <u-cell-item
                  title-width="150"
                  :border-bottom="false"
                  :key="index"
                  v-else
                  :title-style="{ color: '#333333' }"
                  :title="item.name"
                  :arrow="false"
                  hover-class="none"
                  :value-style="{
                      display: 'flex',
                      flex:'none'
                    }"
                >
                  <u-tag
                    class="u-m-l-20"
                    v-for="(tag,indexTwo) in mainInfo.disposalLevelNames"
                    :text="tag"
                    slot="right-icon"
                    :key="indexTwo"
                    :type="tagColor[mainInfo.disposalLevels[indexTwo]]"
                    size="mini"
                  />
                </u-cell-item>
              </template>
            </u-cell-group>
          </view>
        </view>
      </u-card>
      <!-- 预警时间轴 -->
      <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 0' }">
        <view slot="head">
          <view class="card-row u-flex-col">
            <view class="u-flex">
              <u-line
                color="#014833"
                direction="col"
                :hair-line="false"
                margin="0 20rpx 0 0"
                length="40rpx"
              ></u-line>
              <view class="card-row-title t-green f-bold">预警时间轴</view>
            </view>
          </view>
        </view>
        <view slot="body">
          <view class="card-row u-flex-col u-p-t-20 u-p-b-20">
            <view class="time-line-wrap">
              <u-time-line>
                <u-time-line-item nodeTop="40" v-for="(item, index) in timeLine" :key="index">
                  <template v-slot:node>
                    <view class="time-line-node" :class="{ active: item.disposalLevel }"></view>
                  </template>
                  <template v-slot:content>
                    <u-card
                      class="u-m-0"
                      :border="false"
                      box-shadow="0px 0px 8px #ddd6d6"
                      :body-style="{ padding: '0 30rpx' }"
                      :show-head="false"
                    >
                      <view slot="body">
                        <view class="card-row u-flex-col u-p-t-10 u-p-b-10">
                          <view class="time-line-time u-p-t-20 u-p-b-20 t-section">{{ item.stepsTime }}</view>
                          <navigator
                            hover-class="none"
                            :url="getUrl(item)"
                            class="time-line-title"
                            :class="{ active: item.disposalLevel }"
                          >{{ item.description }}</navigator>
                        </view>
                      </view>
                    </u-card>
                  </template>
                </u-time-line-item>
              </u-time-line>
            </view>
          </view>
        </view>
      </u-card>

      <!-- 通讯录趋势图 -->
      <view class="u-flex u-row-between">
        <u-card
          class="card"
          :border="false"
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 30rpx' }"
          :show-head="false"
          v-for="(item, index) in btnList"
          :key="index"
        >
          <view slot="body">
            <view class="card-row u-flex u-p-t-30 u-row-center u-p-b-30" @click="goTo(item.index)">
              <u-image class="u-m-r-20" width="40rpx" height="40rpx" :src="item.src"></u-image>
              <text class="t-green u-font-lg f-bold">{{ item.name }}</text>
            </view>
          </view>
        </u-card>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      alarmId: '',
      mainInfo: {},
      data: {},
      tagColor: {
        1: 'error',
        2: 'warning',
        3: 'warning',
        4: '',
        8: 'primary',
        9: 'primary'
      },
      baseInfo: [
        {
          name: '区县',
          value: 'countyName'
        },
        {
          name: '煤矿名称',
          value: 'customerShortName'
        },
        {
          name: '处置情况',
          value: 'disposalLevelName'
        },
        {
          name: '规则名称',
          value: 'ruleName'
        },
        {
          name: '预警值',
          value: 'cdValue'
        },
        {
          name: '开始时间',
          value: 'beginDate'
        },
        {
          name: '结束时间',
          value: 'endDate'
        },
        {
          name: '持续时长',
          value: 'keepTimeStr'
        },
        {
          name: '预警内容',
          value: ''
        }
      ],
      btnList: [
        {
          name: '通讯录',
          src: require('@/static/image/alarm_phone_icon.svg'),
          index: 'addressBook',
          id: '1'
        },
        {
          name: '历史曲线',
          src: require('@/static/image/alarm_history_icon.svg'),
          index: 'history',
          id: '2'
        }
      ],
      timeLine: []
    }
  },
  methods: {
    goTo(index) {
      if (index === 'addressBook') {
        uni.navigateTo({
          url: `../addressBook/addressBook?coalMineName=${this.data.customerShortName}&code=${this.data.customerCode}`
        })
      } else {
        uni.navigateTo({
          url: `../history/history?data=${JSON.stringify(this.data)}&type='1'`
        })
      }
    },
    getUrl(item) {
      let url = ''
      if (item.disposalLevel === '9') {
        url = `../disposeRecord/enterpriseDisposal?item=${JSON.stringify(item)}&type=0`
      } else if (item?.disposalLevel) {
        url = `../disposeRecord/disposeRecord?item=${JSON.stringify(item)}&type=0`
      }
      return url
    },
    getBasicInfo(item) {
      let value = ''
      if (item.name === '预警内容') {
        let max = this.mainInfo.maxValue ? '  最大值:' + this.mainInfo.maxValue + this.mainInfo?.unitCode + ';' : ''
        let maxTime = this.mainInfo.maxTime ? '  最大值时刻:' + this.mainInfo.maxTime + ';' : ''
        value = (this.mainInfo.cdLocation || this.mainInfo.sensorName) ? (this.mainInfo.cdLocation + '  ' + this.mainInfo.sensorName + max + maxTime) : ''
      } else if (item.name === '预警值') {
        value = this.mainInfo.cdValue + (this.mainInfo.unitCode || '')
      } else {
        value = this.mainInfo[item.value]
      }
      return value
    },
    async getAlarmInfo() {
      const res = await this.$get('/warning/search/getAlarmHistory/' + this.alarmId)
      if (res && res.body.main_info) {
        this.mainInfo = res.body.main_info
      }
      if (res && res.body.steps) {
        this.timeLine = res.body.steps
      }
    }
  },
  onLoad(options) {
    const { data } = options
    this.data = JSON.parse(data)
    this.alarmId = this.data.alarmId ? this.data.alarmId : this.data.id
    this.getAlarmInfo()
  }
}
</script>

<style lang="scss">
.alarmConfirmDetail-content {
  flex: 1;
  overflow: auto;
}
.time-line-wrap {
  padding: 20rpx 20rpx 20rpx 30rpx;
}
.time-line-node {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background: #014833;
  &.active {
    background: #369164;
  }
}
.time-line-title {
  padding-bottom: 10rpx;
  color: #333333;
  &.active {
    color: #369164;
  }
}
.card {
  width: 46%;
}
.footer-btn {
  background: #5bac84 !important;
  color: #fff !important;
  flex: none;
  margin: 20rpx;
}
</style>
